<template>
  <view class="content">
    <z-paging
      :refresher-enabled="refresherEnabled"
      @scroll="onScrollPaging"
      ref="refPaging"
      :model-value="list"
      @onRefresh="onRefresh"
      :hide-empty-view="hideEmptyView"
      :loading-more-enabled="moreEnabled"
      :lower-threshold="lowerThreshold"
      :refresher-complete-delay="800"
      :refresher-threshold="refresherThreshold"
      refresher-complete-text="刷新成功"
    >
      <template #top>
        <slot name="pagingTop" />
      </template>
      <slot name="pagingContent" />
    </z-paging>
  </view>
</template>
<script lang="ts">
import { onMounted, reactive, toRefs } from 'vue';
export default {
  name: 'ngZpaging',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    // 下拉位移与用户下拉距离的比
    refresherThreshold: {
      type: Number,
      default: 60
    },
    // 下拉加载
    moreEnabled: {
      type: Boolean,
      default: true
    },
    // 上拉刷新
    refresherEnabled: {
      type: Boolean,
      default: true
    },
    // 是否强制隐藏空数据图
    hideEmptyView: {
      type: Boolean,
      default: true
    },
    // 距底部多远时
    lowerThreshold: {
      type: Number,
      default: 840
    },
    // 分页
    pageNumber: {
      type: Number,
      default: 1
    },
    // 页码
    pageSize: {
      type: Number,
      default: 20
    }
  },
  emits: ['onScrollPaging', 'onRefresh'], // [列表滚动时触发,自定义下拉刷新被触发]
  setup(props, { emit }) {
    const refData = reactive({
      refPaging: null
    });

    // 上拉触发
    const onRefresh = () => {
      console.log('onRefresh');
      emit('onRefresh', refData.refPaging);
    };

    // 滚动
    const onScrollPaging = (e) => {
      emit('onScrollPaging', e.detail);
    };

    // 回到顶部
    const onScrollTop = (type = true) => {
      refData.refPaging.scrollToTop(type);
    };

    onMounted(() => {
      refData.refPaging.complete(props.list);
    });

    return {
      ...toRefs(refData),
      onRefresh,
      onScrollPaging,
      onScrollTop
    };
  }
};
</script>
<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  .item {
    padding: 50rpx;
    text-align: center;
  }
}
</style>
